<template>
  <h1>1.组件的基本写法</h1>
  <h1>{{person.name}}---{{person.age}}---{{person.sex}}</h1>

</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "About",
})
</script>


<script lang="ts" setup>
/* 
  注意:
    - reactive只能用来创建对象类型的响应式数据,不能创建基本类型的响应式数据

    - ref可以用来创建对象类型的响应式数据,他的value属性就是一个prox代理对象,模板中直接使用的还是这个代理对象,但是以后我们操作这个代理对象就要添加.value了

*/


import {ref} from "vue"
const person = ref({
  name: "laoliu",
  age: 18,
  sex: "男",
})
 
console.log(person);
console.log(person.value.name);



</script>

<style scoped>
</style>